<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { TrashIcon } from '@heroicons/vue/24/outline';
import type { Photo } from '../types';
import { useIntersectionObserver } from '@vueuse/core';
import { preloadImage, registerLazyLoad } from '../utils/imageUtils';

const props = defineProps<{
  photo: Photo;
  onPhotoClick: (photo: Photo) => void;
  onDeleteClick: (photo: Photo) => void;
}>();

const cardRef = ref<HTMLElement | null>(null);
const imageRef = ref<HTMLImageElement | null>(null);
const isVisible = ref(false);
const imageLoaded = ref(false);
const thumbnailUrl = ref('');
const fullImageUrl = ref('');

useIntersectionObserver(cardRef, ([{ isIntersecting }]) => {
  if (isIntersecting && !imageLoaded.value) {
    loadImage();
  }
});

const loadImage = async () => {
  try {
    // Load thumbnail first
    thumbnailUrl.value = props.photo.url;
    imageLoaded.value = true;
    
    // Register for lazy loading of full image
    if (imageRef.value) {
      registerLazyLoad(imageRef.value, props.photo.url, async () => {
        fullImageUrl.value = await preloadImage(props.photo.url);
      });
    }
  } catch (error) {
    console.error('Failed to load image:', error);
  }
};

const handleClick = () => {
  props.onPhotoClick({
    ...props.photo,
    url: fullImageUrl.value || props.photo.url
  });
};

const handleDelete = (event: Event) => {
  event.stopPropagation();
  props.onDeleteClick(props.photo);
};

onMounted(() => {
  if (cardRef.value && window.IntersectionObserver) {
    const observer = new IntersectionObserver(
      ([entry]) => {
        if (entry.isIntersecting) {
          isVisible.value = true;
          observer.disconnect();
        }
      },
      { threshold: 0.1 }
    );
    observer.observe(cardRef.value);
  } else {
    isVisible.value = true;
  }
});
</script>

<template>
  <div 
    ref="cardRef"
    class="photo-card group cursor-pointer"
    :class="{ 'visible': isVisible }"
    @click="handleClick"
  >
    <div class="photo-container">
      <img
        v-if="imageLoaded"
        ref="imageRef"
        :src="thumbnailUrl"
        :alt="photo.title"
        loading="lazy"
        class="transition-all duration-300"
        :class="{ 'opacity-100 scale-100': imageLoaded, 'opacity-0 scale-95': !imageLoaded }"
      />
      <div v-else class="w-full h-full bg-gray-800 animate-pulse"></div>
      
      <div class="overlay">
        <div class="overlay-content">
          <h3>{{ photo.title }}</h3>
          <p>{{ photo.description }}</p>
        </div>
        <button
          class="delete-button"
          @click="handleDelete"
        >
          <TrashIcon class="h-5 w-5" />
        </button>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.photo-card {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  overflow: hidden;
  transform: translateY(50px);
  opacity: 0;
  transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, opacity;
  
  &.visible {
    transform: translateY(0);
    opacity: 1;
  }

  .photo-container {
    position: relative;
    width: 100%;
    aspect-ratio: 3/2;
    overflow: hidden;
    
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      will-change: transform;
    }

    .overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
      opacity: 0;
      transition: opacity 0.3s ease;
      display: flex;
      align-items: flex-end;
      padding: 1rem;
      
      @media (min-width: 640px) {
        padding: 2rem;
      }

      .overlay-content {
        transform: translateY(20px);
        transition: transform 0.3s ease;
        flex: 1;

        h3 {
          font-size: 1.25rem;
          font-weight: 600;
          color: white;
          margin-bottom: 0.25rem;
          
          @media (min-width: 640px) {
            font-size: 1.5rem;
            margin-bottom: 0.5rem;
          }
        }

        p {
          font-size: 0.875rem;
          color: rgba(255,255,255,0.8);
          
          @media (min-width: 640px) {
            font-size: 1rem;
          }
        }
      }

      .delete-button {
        position: absolute;
        top: 1rem;
        right: 1rem;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: white;
        padding: 0.5rem;
        border-radius: 0.5rem;
        opacity: 0;
        transform: translateY(-10px);
        transition: all 0.3s ease;

        &:hover {
          background: rgba(239, 68, 68, 0.9);
          border-color: rgba(239, 68, 68, 0.9);
        }
      }
    }
  }

  @media (hover: hover) {
    &:hover {
      .photo-container {
        img {
          transform: scale(1.05);
        }

        .overlay {
          opacity: 1;

          .overlay-content {
            transform: translateY(0);
          }

          .delete-button {
            opacity: 1;
            transform: translateY(0);
          }
        }
      }
    }
  }

  @media (hover: none) {
    .photo-container {
      .overlay {
        opacity: 1;
        background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 100%);

        .overlay-content {
          transform: translateY(0);
        }

        .delete-button {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }
  }
}
</style>